<template>
	<view class="qiao-sou">
		<view class="custom_header" style="height: {{navH}}px">
			<view class="search">
				<view>
					<img src="/static/search.png" alt="" class="search_img" @click="searchOne">
					<input type="search" placeholder="搜索" class="inp">
				</view>
				<view style="color: #09f;" @click="cancel">取消</view>
			</view>
		</view>
		<view class="one">
			<view class="one_warp">
				<view class="one_p">
					<p style="font-size: 13px;">按指定类型搜索</p>
				</view>
				<ul class="one_list">
					<li class="one_li" v-for="(item, index) in   souList  " :key="index" @click="shenzhen">
						<img :src="item.img" alt="" class="one_img">
						<p style="font-size: 12px; color: #666">{{ item.name }}</p>
					</li>
				</ul>
				<view class="history">
					<view class="history_one">

						<view style="color: #666; font-size: 13px;">搜索历史</view>
						<view @click="clear" style="z-index: 66;">
							<img src="/static/lajitong.png" alt=""
								style="width: 12px; height: 20px; vertical-align: middle;">
							<span style="color: #09f; margin-left: 8px;  font-size: 13px;">清除</span>
						</view>
					</view>
					<ul class="guan">
						<li class="guan_li" v-for="(item, index) in   souListt  " :key="index" @click="sousuo">
							<view>
								<img :src="item.imgg" alt=""
									style="width: 15px; height: 15px; margin-left: 12px; vertical-align: middle;">
								<span style="color: #666; font-size: 15px;">{{ item.namee }}</span>
							</view>
							<view style="color: #ccc;">&gt;</view>
						</li>
					</ul>
				</view>
			</view>
			<view class="footer"></view>
		</view>
	</view>
</template>
<script setup lang="ts">
import { ref } from "vue";
const souList = ref([
	{ id: 0, name: '客户', img: '/static/img/1.png' },
	{ id: 1, name: '线索', img: '/static/img/2.png' },
	{ id: 2, name: '商机', img: '/static/img/3.png' },
	{ id: 3, name: '订单', img: '/static/img/4.png' },
	{ id: 4, name: '联系人', img: '/static/img/14.png' },
	{ id: 5, name: '任务', img: '/static/img/15.png' },
	{ id: 6, name: '日程', img: '/static/img/16.png' },
	{ id: 7, name: '报告', img: '/static/img/17.png' },
])
const souListt = ref([
	{ id: 20, namee: '搜索关键字', imgg: "/static/shizhong.png" },
	{ id: 21, namee: '搜索关键字', imgg: "/static/shizhong.png" },
	{ id: 22, namee: '搜索关键字', imgg: "/static/shizhong.png" },
	{ id: 23, namee: '搜索关键字', imgg: "/static/shizhong.png" },
	{ id: 24, namee: '搜索关键字', imgg: "/static/shizhong.png" },
	{ id: 25, namee: '搜索关键字', imgg: "/static/shizhong.png" },
	{ id: 26, namee: '搜索关键字', imgg: "/static/shizhong.png" },
	{ id: 27, namee: '搜索关键字', imgg: "/static/shizhong.png" },
	{ id: 28, namee: '搜索关键字', imgg: "/static/shizhong.png" },
	{ id: 29, namee: '搜索关键字', imgg: "/static/shizhong.png" },

])
const cancel = () => {
	uni.switchTab({
		url: '/pages/qiao-crm/qiao-crm'
	})
}
const clear = () => {
	souListt.value = []
}
const sousuo = () => {
	uni.navigateTo({
		url: '/pages/qiao-crm/qiao-sousuo/qiaoshezhi/qiaochakan'
	})
}
const searchOne = () => {
	let arr = souList.value.filter(item => item.name.indexOf(souList.value[0].name) !== -1)
	console.log(arr);
	souList.value = arr


}
const shenzhen = () => {
	uni.navigateTo({
		url: '/pages/qiao-crm/qiao-sousuo/shenzhen'
	})
}
</script>

<style scoped lang="scss">
.guan {
	justify-content: space-between;
	width: 375px;
	display: flex;
	flex-wrap: wrap;
}

.guan_li {
	display: flex;
	justify-content: space-between;
	width: 330px;
	height: 35px;
	background-color: white;
	border: 1px solid #eee;
	margin-left: 20px;
	margin-top: 10px;
	line-height: 35px;


}

.history {
	width: 375px;
	overflow: hidden;
}

.history_one {
	display: flex;
	margin-top: 30px;
	justify-content: space-between;
	padding: 20px 20px;

}

.qiao-sou {
	width: 100vw;
	height: 100vh;
}

.custom_header {
	display: flex;
	justify-content: space-between;
	width: 100vw;
	height: 40px;
	margin-top: 30px;
	font-weight: bold;

}

.search {
	display: flex;
	width: 375px;
	justify-content: space-between;
	padding-top: 10px;
	align-items: center;
	padding: 10px 10px;
	position: relative;

	.inp {
		width: 280px;
		height: 30px;
		border: 1px solid #ccc;
		border-radius: 15px;
		padding-left: 30px;

	}
}

.search_img {
	width: 20px;
	height: 20px;
	position: absolute;
	left: 20px;
	top: 10px;
}

.one {
	width: 360px;
	margin-top: 0px;
	overflow: hidden;
	background-color: rgb(249, 249, 249);
	overflow-y: scroll;
	height: calc(100vh - 40px - 50px);
}

.one_p {
	text-align: center;
	margin-top: 15px;
}

.one_img {
	width: 50px;
	height: 50px;
}

.one_list {
	display: flex;
	justify-content: space-between;
	margin-top: 15px;
	padding: 0 20px;
	text-align: center;
	flex-wrap: wrap;

}

.one_li {
	width: 80px;
	height: 80px;
}
</style>
